﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.3.custom.min.css" />	<!-- jqueryUI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />							<!-- jqGrid CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/selfTemplate.css" />						<!-- 本專案自行定義 CSS -->

<script src="js/jquery-1.10.2.min.js"></script>		<!-- jQuery 核心 -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>											<!-- jqGrid 語系檔 -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>										<!-- jqGrid 核心 -->
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->
<script src="js/jquery.cookie.js"></script>																	<!-- 操作cookie用 -->
<script src="js/widgets.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->

<title>維護Squad所包含的主機</title>

<script type="text/javascript">


$(document).ready(function() {

	init("mappingSquadHost.html");
	
	$.ajax({ type:'post',url:"QueryEnv4Select",dataType:'json',async:false,
		data:{subsysId:"fOrder"},
		success : function(reses) {
			if (reses.length > 0) {
				$("#env option").remove();	//將既有的環境內容移除
				$.each(reses,function(i, res) {
					var tmp = "<option class='forRemove' value='"+res.s1+"'>"+res.s2+" ("+res.s1+")"+"</option>";
					$("#env").append(tmp);
				});	
			}
		}, error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
	});
	
	$.ajax({ type:'post',url:"QuerySquad4Select",dataType:'json',async:false,
		data:{bssId:"fOrder",subsysId:"fOrder",envId:$("#env option:checked").val()},
		success : function(reses) {
			if (reses.length > 0) {
				$("#squad option").remove();	//將既有的Squad內容移除
				$.each(reses,function(i, res) {
					var tmp = "<option class='engN forRemove' value='"+res+"'>"+res+"</option>";
					$("#squad").append(tmp);
				});	
			}
		}, error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
	});
	
	
	$("#env").on("change",function(){
		$("select#squad .forRemove").remove();
		
		$.ajax({ type:'post',url:"QuerySquad4Select",dataType:'json',async:false,
			data:{bssId:"fOrder",subsysId:"fOrder",envId:$("#env option:checked").val()},
			success : function(reses) {
				if (reses.length > 0) {
					$.each(reses, function(i, res) {
						var tmp = "<option class='forRemove' value='"+res+"'>"+res+"</option>";
						$("#squad").append(tmp);
					});	
				}
			}, error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
		});
	});
	
	$("#squad").on("change",function(){
		jQuery("#gd").jqGrid('setGridParam',{
			url:"QueryHostINsquad",
			datatype: "json",
			postData: {bssId:"fOrder",subsysId:"fOrder",envId:$("#env option:checked").val(),squadId:$("select#squad option:selected").val() }
		}).jqGrid("setCaption",$("select#subsys option:selected").text()+"， "+$("select#env option:selected").text()+"， "+$("select#squad option:selected").text()+"，所轄主機").trigger('reloadGrid');
		
		$("#gd").on('click',".jqgrow td input[type='checkbox']", function () {
			var isChecked = $(this).is(":checked");
			var ip = $(this).parent().next().html();
    		var port = $(this).parent().next().next().next().html();
    		var oper="del";
      		if ( isChecked ) {
      			oper="add";
      		} else {
      			oper="del";
      		}
			
			$.post("MSH",{oper:oper,ip:ip,port:port,subsysId:"fOrder",envId:$("select#env option:selected").val(),squadId:$("select#squad option:selected").val(),empId:$.cookie("empId") },function(res) {
			});
		});
	});	
	
	
	
	/*	先查詢有那些子系統供 Select	*/
	var tmp ="";
	
	$("#gd").jqGrid({
		url:"QueryHostINsquad",
		datatype: "json",
		postData: {bssId:"fOrder",subsysId:"fOrder",envId:$("#env option:checked").val(),squadId:$("select#squad option:selected").val() },
		colNames:["","主機IP", "主機名稱","PORT","有選"],
	   	//colNames:["<input type='checkbox' onclick='checkBox(event)' />","主機IP", "主機名稱","PORT","有選"],
	   	colModel:[
			{	/*	CheckBox for 勾選	*/
				name:'my_checkbox',
				width:75,
				align:'center',
				edittype:"checkbox",
				formatter: "checkbox",
				sortable: false,
				formatoptions: {disabled:false}
			},
	   		{name:"hostIP",index:"hostIP", edittype:"text"},
	   		{name:"port",index:"port"},
	   		{name:"hostName",index:"hostName"},
	   		{name:"aaa",editable:false,hidden: true, hidedlg: true, editrules: { edithidden: true }}
	   	],
	   	rowNum: 6,
	   	forceFit: true,
	   	pager: "#pager",
		rownumbers: true,
	   	viewrecords: true,	
		loadComplete: function() {
	   		var grid = $("#gd");
	   		var cm = grid.jqGrid('getRowData');
	        for (i=0; i<cm.length; i++) {
	        	if( cm[i].aaa != "" ) {
	        		$("table#gd tr#"+replaceDot(cm[i].aaa)+" td input[type='checkbox']").prop("checked",true);
	        	}
	        }
	    	$("#gd").on('click',".jqgrow td input[type='checkbox']", function () {
	    		var isChecked = $(this).is(":checked");
	    		
	    		$('#gd').jqGrid('setSelection',ip);
	    		var oper="del";
	      		if ( isChecked ) {
	      			$("#edit_gd").removeClass("ui-state-disabled");
	      			oper="add";
	      		} else {
	      			$("#edit_gd").addClass("ui-state-disabled");
	      			oper="del";
	      		}
	      		
	    		var ip = $(this).parent().next().html();
	    		var port = $(this).parent().next().next().next().html();
	    		
	    		$.ajax({type:"post",url:"MSH",dataType:"text",async:false,
	      			data:{oper:oper,ip:ip,port:port,subsysId:"fOrder",envId:$("#env option:selected").val(),squadId:$("#squad option:selected").val(),empId:$.cookie("empId") },
	      			success : function(reses) {
	      			},error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
	      		});
	    	});
	   	}
	});
	jQuery("#gd").jqGrid("navGrid","#pager",{add:false,edit:false,del:false,search:false,refresh:false});
	
}).tooltip();
</script>

</head>
<body>
	<div id="header"></div>		<!-- 畫面抬頭 -->
	<p>
	<img src="pic/mqSquadHost.png" > 
	<p>
	
	<table>
		<thead class="tableFirst">
			<tr>
				<th class="right"><label class="zhTwN" for="env">環境：</label></th>
				<td class="left"><select id="env"><option>--請選擇--</option></select></td>
			</tr>
			<tr>
				<th class="right"><label class="engN" for="squad">Server Group：</label></th>
				<td class="left"><select id="squad"><option>--請選擇--</option></select></td>
			</tr>
		</thead>
	</table>

	<p>
<p>
<table id="gd"></table>
<div id="pager"></div>


</body>
</html>